﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Splitter, Splitter Widget, Splitter, jqxSplitter" />
    <meta name="description" content="This demonstration shows how to use the jqxSplitter API." />
    <title id='Description'>This demonstration shows how to use the jqxSplitter API.
    </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
     <script type="text/javascript">
         $(document).ready(function () {
             var panels = [{ size: 250 }, { size: 250}];
             $('#mainSplitter').jqxSplitter({ height: 500, width: 500,  panels: panels });
             $('#expandFirstButton').jqxButton({  width: 90 });
             $('#expandLastButton').jqxButton({  width: 90 });
             $('#collapseFirstButton').jqxButton({  width: 95 });
             $('#collapseLastButton').jqxButton({  width: 95 });
             $('#enableButton').jqxButton({  width: 80 });
             $('#disableButton').jqxButton({  width: 80 });
             $('#orientationButton').jqxButton({  width: 90 });

             $('#expandFirstButton').click(function () {
                 panels[0].collapsible = true;
                 panels[1].collapsible = false;
                 $('#mainSplitter').jqxSplitter({panels: panels});
                 $('#mainSplitter').jqxSplitter('expand');
             });
             $('#expandLastButton').click(function () {
                 panels[0].collapsible = false;
                 panels[1].collapsible = true;
                 $('#mainSplitter').jqxSplitter({ panels: panels });
                 $('#mainSplitter').jqxSplitter('expand');
             });
             $('#collapseFirstButton').click(function () {
                 panels[0].collapsible = true;
                 panels[1].collapsible = false;
                 $('#mainSplitter').jqxSplitter({ panels: panels });         
                 $('#mainSplitter').jqxSplitter('collapse');
             });
             $('#collapseLastButton').click(function () {
                 panels[0].collapsible = false;
                 panels[1].collapsible = true;
                 $('#mainSplitter').jqxSplitter({ panels: panels });         
                 $('#mainSplitter').jqxSplitter('collapse');
             });
             $('#enableButton').click(function () {
                 $('#mainSplitter').jqxSplitter('enable');
             });
             $('#disableButton').click(function () {
                 $('#mainSplitter').jqxSplitter('disable');
             });
             $('#orientationButton').click(function () {
                 var currentOrientation = $('#mainSplitter').jqxSplitter('orientation');
                 if (currentOrientation === 'vertical') {
                     $('#mainSplitter').jqxSplitter('orientation', 'horizontal');
                 } else {
                     $('#mainSplitter').jqxSplitter('orientation', 'vertical');
                 }
             });
         });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="container" style="float: left;">
            <input type="button" style='margin-top: 5px;' value="Orientation" id="orientationButton" />
            <input type="button" style='margin-top: 5px;' value="Expand first" id="expandFirstButton" />
            <input type="button" style='margin-top: 5px;' value="Expand last" id="expandLastButton" />
            <input type="button" style='margin-top: 5px;' value="Collapse first" id="collapseFirstButton" />
            <input type="button" style='margin-top: 5px;' value="Collapse last" id="collapseLastButton" />
            <input type="button" style='margin-top: 5px;' value="Enable" id="enableButton" />
            <input type="button" style='margin-top: 5px;' value="Disable" id="disableButton" />
            <br /><br />
            <div id="mainSplitter">
                <div style="background-color:#F5FFF2;"></div>
                <div style="background-color:#EBF1FF;"></div>
            </div>
        </div>     
    </div>
</body>
</html>